import React, { FC, useEffect, useContext } from 'react';
import 'antd/dist/antd.min.css';
import LogoHeaderImg from 'src/assets/images/tsllogo.png';
import { useNavigate } from 'react-router-dom';
import { Context } from '../../context';
import { setSessionInfo } from '../../utils/index';

import './index.css';


// const Home: FC<{ joinRoom: () => void, goNext: () => void }> = ({ joinRoom, goNext }) => {
const Home = () => {
  const { setRoomId, setUserId, userId, roomId, joinFailReason, setJoin} = useContext(Context);

  const navigate = useNavigate();

  const goMetting = () => {
    navigate('/metting?userId=1001&roomId=1001');
    // goNext();
  };

  const onFinish = () => {
    // const { roomId, userId } = value;
    // setUserId(userId);
    // setRoomId(roomId);
    // joinRoom();
    setSessionInfo({ roomId: '1001', uid: '1001' });
    window.history.replaceState('', '', `/?userId=${'1001'}&roomId=${'1001'}`);
  };

  useEffect( () => {
    onFinish();
  });

  return <div className='app-container'>
      <img className='logo' src={LogoHeaderImg} alt="" />
      <div>欢迎来到对话式 AI 实时交互体验馆, 我是您的 AI 语音助手</div>
      <div>点击按钮，体验我的能力吧!</div>
      <div onClick={goMetting} className='btn'>
        <img src="//mediaservice-fe.volccdn.com/obj/vcloud-fe/aigc/static/media/magicTool.425d6c7afd4c1a8b01e3633fa958d480.svg" alt="Logo" />
        立即体验
      </div>
    </div>;
};

export default Home;



/**============= */

// import React from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// import reportWebVitals from './reportWebVitals';

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );

// reportWebVitals();
//==========
// import React from 'react';
// import ReactDOM from 'react-dom';
// import App from './App';

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );
//==========

